<div id="charge_item_set">
    <div class="charge_item_set">
        <!--搜索栏-->
        <el-row class="table_search">
            <el-col :span="12">
                <template>
                    <el-input
                            id="seachInfoBox"
                            style="width: 220px;font-size: 12px"
                            clearable
                            v-model="parameters.searchContent">
                    </el-input>
                    <el-button type="primary"  @click="searchFun" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
                </template>
            </el-col>
            <el-col :span="12" class="btnTypeSet">
                <el-button type="primary"
                           icon="el-icon-plus"
                           @click="openAddChargeItem">新增项目</el-button>
            </el-col>
        </el-row>
        <!--表格-->
        <el-table
                size="mini"
                :data="tableData"
                @row-click="handleRowHandle"
                @cell-mouse-enter="mouseEnterEvent"
                align="center"
                style="width: 100%;text-align: center;">
            <el-table-column
                    align="center"
                    width="200"
                    prop="projectName"
                    label="项目名称">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="200"
                    prop="typeName"
                    label="项目类型">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="200"
                    prop="startDate"
                    label="项目起始时间">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="200"
                    prop="endDate"
                    label="项目结束时间">
            </el-table-column>
            <el-table-column
                    label="操作"
                    align="center">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="text"
                            class="btn"
                            @click="amendChargeItem(scope.$index, scope.row)">修改</el-button>
                    <el-button
                            size="mini"
                            type="text"
                            class="btn-Del"
                            @click="deleteRow(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <div class="footerBox">
            <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    layout="prev, pager, next"
                    :current-page.sync="currentPage"
                    :total="totalCount">
            </el-pagination>
        </div>

        <!--新增弹出框-->
        <div class="isShowingBox" v-show="isShowingBox"></div>{{isOverflow}}
        <el-dialog :close-on-click-modal="modalAble" :close-on-press-escape="escAble" title="添加收费项目" :visible.sync="dialogAddChargeItemVisible" :close-on-click-modal="ismodalClose" :show-close="showDelBtn" :before-close="emptyContent">
            <span class="delDialogBtn" @click="closeAddDialog">x</span>
            <el-form
                    class="add-template-form"
                    :rules="rules"
                    ref="addChargeItemForm"
                    :model="addChargeItemForm"
                    label-width="150px"
                    :label-position="labelPosition">
                <el-form-item label="项目名称：" prop="projectName">
                    <!--<el-input v-model="addChargeItemForm.projectName" style="width: 60%;"></el-input>-->
                    <input type="text" name="title" v-model="addChargeItemForm.projectName" style="width: 60%;" required lay-verify="required" autocomplete="off" class="layui-input">
                </el-form-item>
                <el-form-item label="请选择项目类型：" prop="projectTypeId">
                    <el-select v-model="addChargeItemForm.projectTypeId" placeholder="请选择项目类型" style="width: 60%;">
                        <el-option
                                v-for="item in typeNames"
                                :key="item.projectTypeId"
                                :label="item.projectTypeName"
                                :value="item.projectTypeId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="项目起始时间：" prop="startDate">
                    <el-date-picker
                            type="date"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择开始日期"
                            v-model="addChargeItemForm.startDate"
                            style="width: 60%;"></el-date-picker>
                </el-form-item>
                <el-form-item
                        label="项目结束时间："
                        prop="endDate">
                    <el-date-picker
                            type="date"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择结束日期"
                            v-model="addChargeItemForm.endDate"
                            style="width: 60%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="项目描述：" prop="projectDesc">
                    <el-input type="textarea" v-model="addChargeItemForm.projectDesc" style="width: 60%;"></el-input>
                </el-form-item>
            </el-form>
            <!--底部按钮-->
            <div slot="footer" class="dialog-footer">
                <el-button @click="addCaleForm('addChargeItemForm')">取 消</el-button>
                <el-button type="primary" @click="goConfirm('addChargeItemForm')">确 定</el-button>
            </div>
        </el-dialog>

        <!--修改弹出框-->
        <el-dialog :close-on-click-modal="modalAble" :close-on-press-escape="escAble" title="修改收费项目" :visible.sync="dialogAmendChargeItemVisible" :close-on-click-modal="ismodalClose" :show-close="showDelBtn">
            <span class="delDialogBtn" @click="closeAddDialog">x</span>
            <el-form
                    class="add-template-form"
                    :rules="rules"
                    ref="amendChargeItemForm"
                    :model="amendChargeItemForm"
                    label-width="150px"
                    :label-position="labelPosition">
                <el-form-item label="项目名称：" prop="projectName">
                    <el-input v-model="amendChargeItemForm.projectName" style="width: 60%;"></el-input>
                </el-form-item>
                <el-form-item label="请选择项目类型：" prop="projectTypeId">
                    <el-select v-model="amendChargeItemForm.projectTypeId" placeholder="请选择项目类型" style="width: 60%;">
                        <el-option
                                v-for="item in typeNames"
                                :key="item.projectTypeId"
                                :label="item.projectTypeName"
                                :value="item.projectTypeId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                        label="项目起始时间："
                        prop="startDate">
                    <el-date-picker
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            type="date"
                            placeholder="请选择开始日期"
                            v-model="amendChargeItemForm.startDate"
                            style="width: 60%;"></el-date-picker>
                </el-form-item>
                <el-form-item
                        label="项目结束时间："
                        prop="endDate">
                    <el-date-picker
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            type="date"
                            placeholder="请选择结束日期"
                            v-model="amendChargeItemForm.endDate"
                            style="width: 60%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="项目描述：" prop="projectDesc">
                    <el-input type="textarea" v-model="amendChargeItemForm.projectDesc" style="width: 60%;"></el-input>
                </el-form-item>
            </el-form>
            <!--底部按钮-->
            <div slot="footer" class="dialog-footer">
                <el-button @click="amendCaleForm('amendChargeItemForm')">取 消</el-button>
                <el-button type="primary" @click="goConfirm('amendChargeItemForm')">确 定</el-button>
            </div>
        </el-dialog>

        <!--详情弹出框-->
        <el-dialog :close-on-click-modal="modalAble" :close-on-press-escape="escAble" class="dialogDetails" title="收费项目设置详情" :visible.sync="dialogChargeItemInfoVisible" :show-close="showDelBtn">
            <span class="delDialogBtn" @click="closeAddDialog">x</span>
            <div class="info-template-content">
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">项目名称</el-col>
                    <el-col :span="19" style="color: #333">{{chargeItemInfo.projectName}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">项目类型</el-col>
                    <el-col :span="19" style="color: #333">{{chargeItemInfo.typeName}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">项目起始时间</el-col>
                    <el-col :span="19" style="color: #333">{{chargeItemInfo.startDate}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">项目结束时间</el-col>
                    <el-col :span="19" style="color: #333">{{chargeItemInfo.endDate}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">状态</el-col>
                    <el-col :span="19" style="color: #333">{{chargeItemInfo.status}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">项目描述</el-col>
                    <el-col :span="19" style="color: #333">{{chargeItemInfo.projectDesc}}</el-col>
                </el-row>
            </div>
            <!--底部按钮-->
            <!--<div slot="footer" class="dialog-footer">-->
            <!--<el-button @click="dialogChargeItemInfoVisible = false">取 消</el-button>-->
            <!--<el-button type="primary" @click="dialogChargeItemInfoVisible = false">确 定</el-button>-->
            <!--</div>-->
        </el-dialog>

    </div>
</div>
<script>
    $(function () {
        placeHolde("#seachInfoBox","请输入项目名进行搜索");
    });
    var layer,
        loadChargrItem;
    layui.use('layer', function(){
        layer = layui.layer;
        loadChargrItem  = layer.load(1, {shade: [0.5, '#000']});

    });

    // 验证日期间隔
    function validateTime(rule, value, callback){
        // 增加弹窗的时间间隔控制
        if(charge_item_set.dialogAddChargeItemVisible){
            if(charge_item_set.addChargeItemForm.startDate === ''){
                callback(new Error('请先选择开始日期'));
                charge_item_set.addChargeItemForm.endDate = '';
            } else {
                var startT = charge_item_set.addChargeItemForm.startDate;
                var endT = charge_item_set.addChargeItemForm.endDate;
                startT = (new Date(startT)).getTime();
                endT = (new Date(endT)).getTime();
                if(startT > endT){
                    callback(new Error('请选择正确的结束日期'));
                } else {
                    callback();
                }
            }
        }
        // 修改的时间间隔控制
        if(charge_item_set.dialogAmendChargeItemVisible){
            if(charge_item_set.amendChargeItemForm.startDate === ''){
                callback(new Error('请先选择开始日期'));
            } else {
                var startTime = charge_item_set.amendChargeItemForm.startDate;
                var endTime = charge_item_set.amendChargeItemForm.endDate;
                startTime = (new Date(startTime)).getTime();
                endTime = (new Date(endTime)).getTime();
                if(startTime > endTime){
                    callback(new Error('请选择正确的结束日期'));
                } else {
                    callback();
                }
            }
        }
    };
    var charge_item_set =
        new Vue({
            el: "#charge_item_set",
            data: {
                isShowingBox:false,
                showDelBtn:false,
                escAble:false,
                modalAble:false,
                ismodalClose:false,
                chargeItemInfo:{},
                labelPosition:'left',
                tableData: [],// 表格信息
                typeNames:[],
                // 分页
                currentPage: 1,
                totalCount:'',
                totalPage:'',
                parameters:{
                    'currentPage':'',
                    'searchContent':''
                },
                // 添加、修改
                addChargeItemForm:{
                    projectName:'',
                    typeName:'',
                    startDate:'',
                    endDate:'',
                    projectDesc:'',
                    status:'',
                    projectTypeId:''
                },
                amendChargeItemForm:{
                    projectName:'',
                    typeName:'',
                    startDate:'',
                    endDate:'',
                    projectDesc:'',
                    status:'',
                    projectTypeId:''
                },
                dialogAddChargeItemVisible:false,
                dialogAmendChargeItemVisible:false,
                dialogChargeItemInfoVisible:false,
                rules: {
                    projectName: [
                        { required: true, message: '请输入项目名称', trigger: 'blur' },
                        {  max: 15, message: '长度在15个字符以内', trigger: 'blur' }
                    ],
                    projectTypeName: [
                        { required: true, message: '请选择项目类型', trigger: 'change' }
                    ],
                    startDate: [
                        { required: true, message: '请选择开始日期', trigger: 'change' }
                    ],
                    endDate: [
                        { required: true, message: '请选择结束日期', trigger: 'change' },
                        { validator: validateTime, trigger: 'blur' },
                    ],
                    projectTypeId: [
                        { required: true, message: '请选择项目类型', trigger: 'blur' }
                    ]
                },
            },
            methods: {
                backHome:function () {
                    this.closeAddDialog();
                    this.isShowingBox = false;
                },
                /**
                 * 点击X关闭模态框
                 * */
                closeAddDialog:function () {
                    this.isShowingBox = false;
                    if(charge_item_set.dialogAddChargeItemVisible){
                        charge_item_set.dialogAddChargeItemVisible = false;
                        charge_item_set.$refs.addChargeItemForm.resetFields();
                    }else if(charge_item_set.dialogAmendChargeItemVisible){
                        charge_item_set.dialogAmendChargeItemVisible=false;
                        charge_item_set.$refs.amendChargeItemForm.resetFields();
                    } else if(charge_item_set.dialogChargeItemInfoVisible){
                        charge_item_set.dialogChargeItemInfoVisible=false;
                    }
                },

                // 关闭前清空内容before-close
                emptyContent:function(){
                    charge_item_set.dialogAddChargeItemVisible = false;
                    charge_item_set.$refs.addChargeItemForm.resetFields();
                },
                mouseEnterEvent: function(row, event, column){
                    if(event.label == '操作'){
                        column.style.cursor="default"
                    }
                    if(event.label != '操作'){
                        column.style.cursor="pointer"
                    }
                },
                // 分页加载数据
                handleCurrentChange: function(currentPage){
                    Pagesearch(this,'${basePath}merchant/merchant/mProject/getProjectList1', this.parameters,currentPage,
                        function (resData) {
                            if(resData.status == 'success') {

                            }
                        });
                },

                // 删除
                deleteRow: function(index, rows) {
                    stopMaoPao();
                    var that = this;
                    var msg = confirm('确认删除该收费项目吗？');
                    if(msg){
                        var options ={"projectId":rows.projectId};
                        sendService('${basePath}/merchant/mProject/deleteMProject',options,function (resData) {
                            if(resData.status == 'success') {
                                if(resData.msg.indexOf('该收费项目存在待缴费不能删除')> -1) {
//                                    charge_item_set.$message({
//                                        type: 'warning',
//                                        message: resData.msg
//                                    })
                                    layer.msg(resData.msg, {icon: 2});
                                }
                                if(resData.msg.indexOf('删除成功')>-1) {
//                                    charge_item_set.$message({
//                                        type: 'success',
//                                        message: resData.msg
//                                    });
                                    layer.msg(resData.msg, {icon: 6});
                                    reloadPage('${basePath}merchant/mProject/getProjectList');
                                }
                                if(resData.msg.indexOf('删除失败')>-1) {
//                                    charge_item_set.$message({
//                                        type: 'info',
//                                        message: resData.msg
//                                    })
                                    layer.msg(resData.msg, {icon: 2});
                                }
                            }
                        });
                    }
                },
                // 搜索
                searchFun: function(){
                    if(this.parameters.searchContent == '') {
                        reloadPage('${basePath}merchant/mProject/getProjectList');
                    }else {
                        Pagesearch(this, '${basePath}merchant/mProject/getProjectList1', this.parameters, 1,
                            function (resData) {
                                if (resData.status == 'success') {

                                }
                            });
                    }
                },
                // 详情
                handleRowHandle:function (row,event,column) {
                    if(column.label==='操作'){
                        return
                    } else {
                        charge_item_set.isShowingBox = true;
                        charge_item_set.dialogChargeItemInfoVisible = true;
                        charge_item_set.chargeItemInfo = row;
                    }
                },
                // 打开添加的弹窗
                openAddChargeItem:function () {
                    this.isShowingBox = true;
                    var options = {};
                    charge_item_set.dialogAddChargeItemVisible = true;
                    sendService('${basePath}/merchant/mProject/getProjectType',options,
                        function (resData) {
                            if(resData.status == 'success'){
                                charge_item_set.typeNames = resData.t;
                            }
                        });
                },
                // 关闭添加的弹窗
                addCaleForm: function (formName) {
                    this.isShowingBox = false;
                    charge_item_set.dialogAddChargeItemVisible = false;
                    charge_item_set.$refs[formName].resetFields();
                },
                // 打开修改的弹窗
                amendChargeItem:function (index,row) {
                    var options ={};
                    stopMaoPao();
                    this.isShowingBox = true;
                    charge_item_set.dialogAmendChargeItemVisible = true;
                    charge_item_set.amendChargeItemForm = row;
                    // 获取项目类型
                    sendService('${basePath}/merchant/mProject/getProjectType',options,
                        function (resData) {
                            if(resData.status == 'success'){
                                charge_item_set.typeNames = resData.t;
                            }
                        });
                },
                // 关闭修改的弹窗
                amendCaleForm: function (formName) {
                    this.isShowingBox = false;
                    charge_item_set.dialogAmendChargeItemVisible = false;
                    charge_item_set.$refs[formName].resetFields();
                },
                // 添加、修改提交功能
                goConfirm: function (formName) {
                    charge_item_set.$refs[formName].validate(
                        function(valid) {
                            if (valid) {
                                if(formName === 'addChargeItemForm'){
                                    sendService('${basePath}/merchant/mProject/saveOrUpdateMProject',charge_item_set.addChargeItemForm,function (resData) {
                                        if(resData.status == 'success'){
                                            if(resData.msg.indexOf('添加成功')> -1) {
//                                                charge_item_set.$message({
//                                                    type: 'success',
//                                                    message: resData.msg
//                                                });
                                                layer.msg(resData.msg, {icon: 6});
                                                // 保存成功后关闭弹窗
                                                charge_item_set.isShowingBox = false;
                                                charge_item_set.dialogAddChargeItemVisible = false;
                                                // 刷新页面
                                                reloadPage('${basePath}merchant/mProject/getProjectList');
                                            }
                                            if(resData.msg.indexOf('项目名称已经存在')>-1) {
                                                charge_item_set.$refs[formName].resetFields();
//                                                charge_item_set.$message({
//                                                    type: 'warning',
//                                                    message: resData.msg
//                                                });
                                                layer.msg(resData.msg, {icon: 2});
                                            }
                                        }
                                    })
                                }else if(formName === 'amendChargeItemForm'){
                                    sendService('${basePath}/merchant/mProject/saveOrUpdateMProject',charge_item_set.amendChargeItemForm,
                                        function (resData) {
                                            if(resData.status == 'success'){
                                                if(resData.msg.indexOf('修改成功')> -1) {
//                                                    charge_item_set.$message({
//                                                        type: 'success',
//                                                        message: resData.msg
//                                                    });
                                                    layer.msg(resData.msg, {icon: 6});
                                                    // 保存成功后关闭弹窗
                                                    charge_item_set.isShowingBox = false;
                                                    charge_item_set.dialogAmendChargeItemVisible = false;
                                                    // 刷新页面
                                                    reloadPage('${basePath}merchant/mProject/getProjectList');
                                                }
                                            }
                                            if(resData.msg.indexOf('项目名称已经存在')>-1) {
                                                charge_item_set.$refs[formName].resetFields();
//                                                charge_item_set.$message({
//                                                    type: 'warning',
//                                                    message: resData.msg
//                                                });
                                                layer.msg(resData.msg, {icon: 2});
                                            }
                                        });
                                }
                            } else {
                                return false;
                            }
                        });
                },
            },
            created: function () {
                // 从后台获取请求数据的URL
                Pagesearch(this,'${basePath}merchant/mProject/getProjectList1', null,1,function (resData) {
                    if(resData.status == 'success'){
                        layer.close(loadChargrItem);
                        // 成功后的callback
                        if(resData.status == 'success'){
                            resData.t.forEach(function (item) {
                                item.startDate = new Date(item.startDate).Format('yyyy-MM-dd');
                                item.endDate = new Date(item.endDate).Format('yyyy-MM-dd');
                                if(item.status == '1'){
                                    item.status = '正常';
                                } else if(item.status == '0'){
                                    item.status = '失效';
                                }
                            });
                        }
                    }
                });
            },
            computed:{
                isOverflow:function () {
                    if(this.isShowingBox){
                        $(".main-right").css({'overflow':"hidden"});
                    }
                    if(!this.isShowingBox){

                        $(".main-right").css({'overflow':"auto"});
                    }

                }
            }
        });
</script>

<style scoped>
    .table_search, .table_btn{
        height: 60px;
        margin-bottom: 10px;
        background: #fff;
        padding: 10px 20px 30px;
    }


    .charge_item_set .searchBox{
        height: 60px;
        line-height: 60px;
        padding-left: 30px;
        margin-bottom: 10px;
        background: #fff;
    }
    .charge_item_set .table_btn{
        height: 60px;
        margin-bottom: 10px;
        background: #fff;
        padding: 10px 20px 30px;
    }
    .charge_item_set .btnTypeSet{
        text-align: right;
    }
    .charge_item_set .footerBox{
        width: 100%;
        height: 50px;
        text-align: right;
        background-color: #fff;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding-top: 9px;
    }
    .el-dialog__body{
        padding: 40px 0 40px 100px;
    }
    .el-dialog__header span {
        padding-left: 20px;
    }
    .el-dialog__headerbtn .el-dialog__close {
        color: #aaa;
        font-size: 22px;
    }
    .dialogDetails .el-dialog {
        overflow: hidden;
        -webkit-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        -moz-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        box-shadow: 0 0 16px rgba(0,0,0,0.5);
    }
    .el-dialog__header {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255,68,68,1);
        width: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        background-color: #fff;
    }
    .el-dialog__body {
        padding-top: 75px;
    }
    .dialogDetails .el-dialog__body {
        padding: 50px 0 0 0;
    }
    .dialogDetails .info-template-content .el-row:nth-child(even) {
        background-color: #efefef;
    }
    .dialogDetails .item-row {
        /*height: 46px;*/
        line-height: 46px;
        font-size: 16px;
        padding-left: 60px;
    }
    .dialogDetails .item-row div:first-of-type {
        color: #666;
        text-align: left;
    }
    .dialogDetails .item-row div:last-of-type {
        color: #333;
        padding-right: 10px;
    }
    .dialogDetails .info-template-content .el-row:last-of-type {
        margin-bottom: 30px;
    }
    .el-textarea__inner{
        overflow: auto;
    }
</style>
